import styles from './index.less';
import { useEffect, useRef, useState } from 'react';
import _ from 'lodash';

const width = 1920 * window.scaleBase;

const getScale = () => {
  return window.innerWidth / width;
}

const ScaleLayout = props => {
  const [scale, setScale] = useState(getScale());
  const [height, setHeight] = useState(window.innerHeight / scale);
  const fn = useRef();

  useEffect(() => {
    fn.current = _.debounce(() => {
      const t = getScale();
      setScale(t);
      setHeight(window.innerHeight / t);
      setTimeout(()=> {
        window.location.reload();
      }, 100);
    }, 300);
    window.addEventListener('resize', fn.current);
    return () => window.removeEventListener('resize', fn.current);
  },[]);

  return <div style={{
    transform: `scale(${scale})`,
    WebkitTransform: `scale(${scale})`,
  }} className={styles.scaleLayoutWrapper}>
    <div style={{
      width,
      height,
    }}>
      {props.children}
    </div>
  </div>
}

export default ScaleLayout;
